<template>
  <div>
    <Card shadow>
      树状表格组件tree-table-vue，基于
      <a href="https://github.com/MisterTaki/vue-table-with-tree-grid">
        vue-table-with-tree-grid
      </a>
      进行开发，修复了一些bug，添加了一些新属性
      <p><b>支持使用slot-scope进行自定义列渲染内容</b></p>
      <p>
        文档请看
        <a href="https://github.com/lison16/tree-table-vue">
          https://github.com/lison16/tree-table-vue
        </a>
      </p>
      <tree-table
        expand-key="sex"
        :expand-type="false"
        :selectable="false"
        :columns="columns"
        :data="data"
      >
        <template slot="likes" slot-scope="scope">
          <Button @click="handle(scope)">123</Button>
        </template>
      </tree-table>
    </Card>
  </div>
</template>

<script>
export default {
  name: "tree_table_page",
  data() {
    return {
      columns: [
        {
          title: "name",
          key: "name",
          width: "400px",
        },
        {
          title: "sex",
          key: "sex",
          minWidth: "50px",
        },
        {
          title: "score",
          key: "score",
        },
        {
          title: "likes",
          key: "likes",
          minWidth: "200px",
          type: "template",
          template: "likes",
        },
      ],
      data: [
        {
          name: "Jack",
          sex: "male",
          likes: ["football", "basketball"],
          score: 10,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  likes: ["football", "basketball"],
                  score: 20,
                },
                {
                  name: "Taki",
                  sex: "male",
                  likes: ["football", "basketball"],
                  score: 10,
                  children: [
                    {
                      name: "Ashley",
                      sex: "female",
                      likes: ["football", "basketball"],
                      score: 20,
                    },
                    {
                      name: "Taki",
                      sex: "male",
                      likes: ["football", "basketball"],
                      score: 10,
                      children: [
                        {
                          name: "Ashley",
                          sex: "female",
                          likes: ["football", "basketball"],
                          score: 20,
                        },
                        {
                          name: "Taki",
                          sex: "male",
                          likes: ["football", "basketball"],
                          score: 10,
                        },
                      ],
                    },
                  ],
                },
              ],
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10,
            },
          ],
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 20,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  likes: ["football", "basketball"],
                  score: 20,
                },
                {
                  name: "Taki",
                  sex: "male",
                  likes: ["football", "basketball"],
                  score: 10,
                },
              ],
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  likes: ["football", "basketball"],
                  score: 20,
                },
                {
                  name: "Taki",
                  sex: "male",
                  likes: ["football", "basketball"],
                  score: 10,
                },
              ],
            },
          ],
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 20,
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 20,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20,
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10,
            },
          ],
        },
      ],
    };
  },
  methods: {
    handle(scope) {
      console.log(scope);
    },
  },
};
</script>